<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>备忘录</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <div>
        <input type="text" name="memo" v-model="memo"> <button @click="addMessage">添加备忘录</button>
    </div>
    <h3>备忘录列表</h3>
    <ul>
        <li v-for="(message,index) in memos"> {{message}} <button @click="del(index)">删除</button></li>
    </ul>

    <span v-show="memos.length==0">没有备忘录请添加</span>
    <div>
        <button @click="clearMessage">清空备忘录</button>    备忘录共有 {{memos.length}}  条
    </div>

</div>

<script type="text/javascript">
    const vm = new Vue({
        el:'#app',
        data:{
            memo:'',
            memos:[
                "备忘录1","备忘录2"
            ]
        },
        methods:{
            addMessage(){
                // 判定备忘录是否填写
                if (this.memo.trim().length==0){
                    alert("请填写备忘录")
                    this.memo = ''
                    return
                }
                this.memos.push(this.memo)
                this.memo = ''
            },
            clearMessage(){
                this.memos = []
            },
            del(index){
                //删除指定索引位的值
                this.memos.splice(index,1)
            }
        }
    })
</script>

</body>
</html>
